import React from 'react';

const TeamMember = ({ name, initial, bgColor, textColor }) => (
  <div className="flex flex-col items-center">
    <div className={`w-16 h-16 mb-2 rounded-full ${bgColor} flex items-center justify-center ${textColor} font-semibold`}>
      {initial}
    </div>
    <span className="text-sm text-gray-700 dark:text-gray-300">{name}</span>
  </div>
);

const TeamSection = () => {
  const teamMembers = [
    {
      name: "鱼得水",
      initial: "鱼",
      bgColor: "bg-primary-100 dark:bg-primary-900",
      textColor: "text-primary-600 dark:text-primary-400"
    },
    {
      name: "Nicol",
      initial: "N",
      bgColor: "bg-secondary-100 dark:bg-secondary-900",
      textColor: "text-secondary-600 dark:text-secondary-400"
    },
    {
      name: "佐罗",
      initial: "佐",
      bgColor: "bg-green-100 dark:bg-green-900",
      textColor: "text-green-600 dark:text-green-400"
    },
    {
      name: "小刚",
      initial: "小",
      bgColor: "bg-yellow-100 dark:bg-yellow-900",
      textColor: "text-yellow-600 dark:text-yellow-400"
    },
    {
      name: "阿鸿师兄",
      initial: "阿",
      bgColor: "bg-red-100 dark:bg-red-900",
      textColor: "text-red-600 dark:text-red-400"
    },
    {
      name: "Jason",
      initial: "J",
      bgColor: "bg-purple-100 dark:bg-purple-900",
      textColor: "text-purple-600 dark:text-purple-400"
    },
    {
      name: "Wendy",
      initial: "W",
      bgColor: "bg-pink-100 dark:bg-pink-900",
      textColor: "text-pink-600 dark:text-pink-400"
    },
    {
      name: "Stella",
      initial: "S",
      bgColor: "bg-blue-100 dark:bg-blue-900",
      textColor: "text-blue-600 dark:text-blue-400"
    }
  ];

  return (
    <section className="py-16 bg-gray-50 dark:bg-gray-800">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16 fade-in">
          <h2 className="text-3xl font-bold mb-4 text-gray-900 dark:text-white">开发团队</h2>
          <p className="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">感谢以下团队成员为图灵画匠项目做出的贡献</p>
        </div>
        
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-8 gap-4">
          {teamMembers.map((member, index) => (
            <TeamMember key={index} {...member} />
          ))}
        </div>
      </div>
    </section>
  );
};

export default TeamSection; 